<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>grid样式布局2</title>
	</head>

	<style>
		.grid-container {
			display: grid;
			grid-template-columns: 200px 400px auto;
			/* 列宽度 */
			grid-template-rows: 50px 200px 100px;
			/* 行高度 */
			grid-gap: 5px;
			background-color: antiquewhite;
		}

		.grid-item {
			border: tan 1px solid;
			text-align: center;
			padding: 5px;
			background-color: lightsteelblue;
		}

		.item1 {
			/* grid-column: 1/3;  */
			/* 从第几列开始到第n-1列结束 */
			grid-column: 1 / span 3;
			/* 从第几列开始（span）合并n列 */
		}

		/* 演示 */
		.grid-container2 {
			display: grid;
			grid-template-columns: 200px 900px auto;
			/* 列宽度 */
			grid-template-rows: 50px 200px 100px;
			/* 行高度 */
			grid-gap: 5px;
			background-color: antiquewhite;
		}

		.grid-container2  .div{
			text-align: center;
		}

		.grid-container2 .row-span {
			grid-row: 2 / span 3;
		}
		
		.grid-container2 .column-span {
			grid-column: 1 / span 3;
		}
	</style>
	<body>
		<div class="grid-container">
			<div class="grid-item item1">1</div>
			<div class="grid-item">2</div>
			<div class="grid-item">3</div>
			<div class="grid-item">4</div>
			<div class="grid-item">5</div>
			<div class="grid-item">6</div>
			<div class="grid-item">7</div>
			<div class="grid-item">8</div>
			<div class="grid-item">9</div>
			<div class="grid-item">10</div>
		</div>

		<h2>间隔</h2>
		<div class="grid-container2">
			<div class="grid-item column-span">head</div>

			<div class="grid-item row-span">left</div>
			
			<!-- 
			 实例
			 使 "item8" 从 row-line 2 和 column-line 2 开始，在 row-line 3 和 column line 3 结束：
			 
			 .item8 {
			   grid-area: 2/2/3/2;
			 }
			 如果不这样定位  right会把 center部分挤下去
			 -->
			<div class="grid-item" style="grid-area:2/2/3/3" >center1</div>
			<div class="grid-item" style="grid-area:3/2/4/3">center2</div> 	
			
			<div class="grid-item row-span">right</div>
			
			<div class="grid-item column-span">foot</div>
		</div>
	</body>
</html>
